<template>
	<view class="nav">
		<uni-segmented-control class="topBar" :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#2984d9"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<water />
			</view>
			<view v-show="current === 1">
				<Electricity />
			</view>
			<view v-show="current === 2">
				<Ic />
			</view>
		</view>
	</view>
</template>

<script setup>
	import water from "../../../components/Water/Water.vue"
	import Electricity from "../../../components/Electricity/Electricity.vue"
	import Ic from "../../../components/ICcard/ICcard.vue"
	import {
		ref,
		reactive
	} from "vue"
	const items = reactive(['水费充值', '电费充值', 'IC卡充值'])
	const current = ref(0)
	
	function onClickItem(e) {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
	}
</script>
<style lang="scss">
	html,body{
		background-color: #f3f3f3;
	}
.nav{
	// border: 1px solid;
	margin-top: 40rpx;
	font-size: 40rpx
}
	.container{
		padding: 5rpx;
	}
	.logoBox{
		float: left;
		vertical-align: bottom;
		padding: 10rpx 0;
		width: 100rpx;
		height: 50rpx;
		overflow: hidden;
		display: flex;
		flex-direction:column;
		justify-content:space-between;
	}
	.logoBox .logo{
		height: 30rpx;
		width: 100rpx;
	}
	.logoBox .logo{
		height: 15rpx;
	}
	.topBar{
		font-size: 30rpx !important;
	}
</style>



